<template>
    <div style="padding:0 17px">
        <Breadcrumb/>
        <div style="display: flex;margin-top: 15px;">
            <el-select v-model="searchClient"
                       placeholder="选择单位"
                       style="width: 150px;margin-right: 15px"
                       filterable
                       clearable>
                <el-option
                        v-for="item in clientOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-select
                    v-model="searchIsMisinformation"
                    placeholder="选择是否误报"
                    style="width: 150px;margin-right: 15px"
                    clearable
            >
                <el-option
                        v-for="item in isMisinformationOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                />
            </el-select>
            <el-date-picker style="width: 200px;margin-right: 15px" v-model="searchDate" value-format="YYYY-MM"
                            type="month" placeholder="月份"/>
            <!--<el-button icon="Search" type="primary" style="color: #fff;font-size: 12px;background-color: #1890ff;"-->
                       <!--@click="load">搜索-->
            <!--</el-button>-->
            <!--<el-button type="success" style="" @click="exportData">导出</el-button>-->
        </div>

        <div style="width: calc(100vw - 240px);height: calc(18vw);">
            <span>
                <ZhuZhuang :data1="data1"/>
                <ZheXian :data1="data1"/>
            </span>
        </div>
    </div>
</template>

<script>
    import request from "@/utils/request.js";
    import Breadcrumb from "@/components/Breadcrumb.vue";
    import {serverIp} from "../../../public/static/config"
    import ZheXian from "@/views/homeComponents/ZheXian.vue";
    import ZhuZhuang from "@/views/homeComponents/ZhuZhuang.vue";
    export default {
        name: "HourElectricityStatistics",
        components: {Breadcrumb, ZheXian,ZhuZhuang},
        data() {
            return {
                searchDate: '',
                tableData: [],
                ruleForm: [],
                clientOptions: [],
                warnStateOptions: [],
                searchClient: "",
                searchIsMisinformation: '',
                searchWarnState: "",
                isMisinformationOptions: [
                    {
                        value: "0",
                        label: "真实"
                    }, {
                        value: "1",
                        label: "误报"
                    }],
                currentPage: 1,
                pageSize: 10,
                total: 10,
                data1: [],
                DTs: [],
                fireCounts: [],
                breakCounts: [],
            }
        },
        mounted() {
            // 初始化加载用户数据
            this.load()
            this.getClientOptions()
        },
        watch: {
            searchDate() {
                this.load()
            },
            searchClient() {
                this.load()
            },
            searchIsMisinformation() {
                this.load()
            },
        },
        methods: {
            getClientOptions() {
                let level = JSON.parse(localStorage.getItem("user")).level
                let organizationId = JSON.parse(localStorage.getItem("user")).organization
                let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
                let clientIds;
                if (isAllClient === "1") {
                    clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
                } else {
                    clientIds = [];
                }
                request.get("/client/listbyName?name=" + this.searchClient + "&organizationId=" + organizationId + "&level=" + level + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds).then(res => {
                    this.clientOptions = res.data
                })
            },
            // handleSizeChange(pageSize) {   // 改变当前每页的个数触发
            //     this.pageSize = pageSize
            //     this.load()
            // },
            // handleCurrentChange(pageNum) {  // 改变当前页码触发
            //     this.currentPage = pageNum
            //     this.load()
            // },
            load() {
                let date;
                console.log("this.searchDate" + this.searchDate)
                if (this.searchDate === '' || this.searchDate === undefined || this.searchDate === null) {
                    date = new Date();
                } else {
                    date = new Date(this.searchDate);
                }
                console.log("this.searchDate1" + date)
                let new_year = date.getFullYear(); // 取当前的年份
                let month = date.getMonth();
                let new_month = month + 1; // 取当前的月份
                let mon = "";
                let day = 0;
                let firstDay = new Date(new_year, month, 1); // 取当年当月中的第一天
                let lastDay = new Date(new_year, new_month, 0).getDate(); // 获取当月最后一天日期
                if (firstDay.getMonth() < 9) {
                    mon = "0" + (firstDay.getMonth() + 1);
                } else {
                    mon = firstDay.getMonth() + 1;
                }
                if (lastDay < 10) {
                    day = "0" + lastDay;
                } else {
                    day = lastDay;
                }
                //选择月份的第一天
                let firstDayStr = firstDay.getFullYear() + "-" + mon + "-" + "0" + firstDay.getDate() + " 00:00:00";
                //选择月份的最后一天
                let lastDayStr = firstDay.getFullYear() + "-" + mon + "-" + day + " 23:59:59";
                let level = JSON.parse(localStorage.getItem("user")).level
                let organizationId = JSON.parse(localStorage.getItem("user")).organization
                let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
                let clientIds;
                if (isAllClient === "1") {
                    clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
                } else {
                    clientIds = [];
                }
                if (this.searchClient === undefined) {
                    this.searchClient = '';
                }
                if (this.searchIsMisinformation === undefined) {
                    this.searchIsMisinformation = ""
                }
                console.log(this.searchClient)
                request.get("/warn-record/findMouthData?organizationId=" + organizationId + "&level=" + level + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds + "&startTime=" + firstDayStr + "&endTime=" + lastDayStr + "&clientId=" + this.searchClient + "&isMisinformation=" + this.searchIsMisinformation).then(res => {
                    this.data1 = res.data;
                })
            },
        }
    }
</script>

<style scoped>
    :deep(.el-table th .cell) {
        font-weight: 700
    }

    :deep(.el-select-dropdown__item) {
        font-size: 13px;
    }

    :deep(.el-select__wrapper) {
        font-size: 13px;
    }
</style>
